<template>
  <div class="download-container">
    <div class="header">
        <div class="header-title">您可以:</div>
        <i class="close-icon" @click="closeAndSureBtn('close')"></i>
    </div>
    <div class="download-type">
      <div class="download-item">
          <div class="left">
            <div class="title"><i class="icon1-img"></i>下载文件到微信</div>
            <div class="secTitle">下载并发送到微信</div>
          </div>
          <div class="right">
            <div class="right-btn top" @click="downToWX">下载到微信</div>
          </div>
      </div>
      <div class="download-item">
          <div class="left">
            <div class="title"><i class="icon2-img"></i>下载到本地查看</div>
            <div class="secTitle">复制链接到浏览器访问即可</div>
          </div>
          <div class="right">
            <div class="right-btn botton" @click="clickCopyUrl">复制链接</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import fun from '../../../util/function'
import wx from 'weixin-js-sdk'
export default {
  props: {
    meetingMsg: Object
  },
  data() {
    return {
    }
  },
  methods: {
    closeAndSureBtn(type) {
      this.$emit("formChildMsg", {
        type: "closeVantPopup",
      });
    },
    clickCopyUrl() {
      fun.copyTxt(this.meetingMsg.link, () => {
        fun.toastMessage('复制成功!');
      })
    },
    downToWX() {
      wx.miniProgram.navigateTo({
        url: `/pagesA/download/index?url=${encodeURIComponent(this.meetingMsg.link)}&title=${encodeURIComponent(this.meetingMsg.title)}`
      })
    },
  }
}
</script>

<style lang="less" scoped>
.download-container{
  width: 100%;
  height: 100%;
  .header{
      width: 90%;
      height: 92px;
      margin: 0 auto;
      border-bottom: 1px solid #F2F2F2;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .header-title{
          width: 100px;
          height: 100%;
          flex:1;
          font-weight: 600;
          font-size: 30px;
          line-height: 92px;
          color: #666666;
          padding-left: 40px;
      }
      .close-icon{
          width: 48px;
          height: 48px;
          background: url('../../../assets/images/report_close.png') no-repeat;
          background-size: 48px 48px;
      }
  }
  .download-type{
    width: 100%;
    height: calc(100% - 92px);
    .download-item{
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left{
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 25px;
        .title{
          width: 100%;
          height: 45px;
          color: #333333;
          font-weight: 500;
          font-size: 38px;
          display: flex;
          line-height: 45px;
          .icon1-img{
              width: 48px;
              height: 48px;
              background: url('../../../assets/images/WechatIcon.png') no-repeat;
              background-size: 48px 48px;
              margin-right: 10px;
          }
          .icon2-img{
              width: 48px;
              height: 48px;
              background: url('../../../assets/images/downloadIcon.png') no-repeat;
              background-size: 48px 48px;
              margin-right: 10px;
          }
        }
        .secTitle{
          width: 100%;
          height: 45px;
          color: #666666;
          font-size: 28px;
        }
      }
      .right{
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .right-btn{
          width: 200px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          color: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
        }
        .top{
          background: #45B035;
        }
        .botton{
          background: #F9CE15;
        }
      }
    }
  }
}

</style>